<template>
  <div class="page">
    <m-header :title="title"></m-header>
    <div class="page-content">
      <div class="user_img">
        <img @click="showPop = true" :src="require('../assets/images/tou/' + u_img + '.png')" alt="">
        <p>点击头像更换</p>
      </div>
      <div class="list">
        <div class="item">
          <p>用户名</p>
          <input type="text" placeholder="输入需要修改的用户名" maxlength="12" v-model="name">
        </div>
        <div class="item">
          <p>账 号</p>
          <input class="ccount" type="text" disabled :value="userInfo.ccount" maxlength="12">
        </div>
				<div class="sex-body">
				  <p>性 别</p>
					<div class="sex-content">
						<div class="sex-item">
							<div 
								v-for="(item, index) in sex_lsit" 
								:key="index" 
								@click="sex = item.id;"
								:class="(item.id == sex && userInfo.sex == 2) ? 'active' : ''"
							>
								<img :src="require('../assets/images/' + item.icon + '.png')" alt="">
								<span>{{item.name}}</span>
							</div>		
						</div>
						<div class="tishi" v-show="userInfo.sex == 2">*确认性格后不可更改</div>
					</div>
					<p></p>
				</div>
      </div>
      <button @click="save">保存修改</button>
    </div>
    <!-- 选择头像 -->
    <div class="head-pop" v-show="showPop">
      <div class="head-pop-bg" @click="showPop = false"></div>
      <div class="head-pop-content">
        <ul>
          <li v-for="item in 10" :key="item" @click="selectHead(item)">
            <img :src="require('../assets/images/tou/' + item + '.png')" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      title: '个人中心',
      name: '',
      u_img: 1,
      showPop: false,
			sex_lsit: [
				{id: 1, name: '男生', icon: 'ico_boy'},
				{id: 0, name: '女生', icon: 'ico_girl'}
			],
			sex: 2,
    }
  },
  computed: {
  	...mapState(['userInfo'])
  },
  methods: {
    save () {
      if(!this.name){
        this.$toast('先写个用户名吧');
      } else {
				this.$loading.show();
				this.$http.upUserInfo({
					token: this.userInfo.token,
					u_id: this.userInfo.id,
					name: this.name,
					u_img: this.u_img,
					sex: this.sex
				}).then((res) => {
					this.$loading.hide();
					console.log(res);
					if(res.code === 0){
						this.$toast(res.msg);
						this.userInfo.name = this.name
						this.userInfo.u_img = this.u_img
						this.userInfo.sex = this.sex
						this.setSex(this.sex);
					} else {
						this.$toast(res.msg);
					}
				})
      }
    },
    selectHead (item) {
      this.u_img = item
      this.showPop = false;
    },
		setSex(sex){
			if(sex == 1){
				this.sex_lsit = [{id: sex, name: '男', icon: 'ico_boy'}]
			} else if(sex == 0) {
				this.sex_lsit = [{id: sex, name: '女', icon: 'ico_girl'}]
			}
		}
  },
  mounted () {
    this.name = this.userInfo.name;
    this.u_img = this.userInfo.u_img;
		this.sex = this.userInfo.sex;
		this.setSex(this.userInfo.sex);
  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page{
  background: #fff;
  min-height: 100vh;
}
.page-content{
  padding-top: rem(40);
  width: calc(100% - 60px);
  margin-left: 30px;
  .user_img{
    margin-bottom: rem(80);
    img{
      width: rem(140);
      height: rem(140);
      border-radius: 50%;
      box-shadow: 0 1px 5px rgba(0,0,0,.2);
    }
    p{
      margin-top: rem(30);
      color: #8694e2;
      font-size: rem(24);
    }
  }
  .list{
    .item{
      height: rem(120);
      line-height: rem(120);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px #ddd solid;
      p{
        flex: 1;
        font-size: rem(32);
        text-align: left;
        color: #8694e2;
        font-weight: bold;
      }
      input{
        flex: 3;
        height: rem(80);
        background: none;
        color: #484848;
        &.ccount{
          opacity: .5;
        }
      }
    }
		.sex-body{
			border: none;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: rem(40);
			p{
				flex: 1;
				font-size: rem(32);
				text-align: left;
				color: #8694e2;
				font-weight: bold;
			}
			.sex-content{
				flex: 3;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.tishi{
					color: red;
				}
				.sex-item{
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-bottom: rem(40);
					div{
						padding: rem(40);
						border-radius: rem(10);
						border: 1px #ddd solid;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						img{
							width: rem(80);
						}
						span{
							color: #666;
							margin-top: rem(20);
						}
						&.active{
							border-color: #8694e2;
							span{
								color: #8694e2;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
  }
  button{
    margin-top: rem(80);
  }
}
.head-pop{
  .head-pop-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,.7);
  }
  .head-pop-content{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 101;
    padding: rem(80) 0 rem(120) 0;
    border-radius: rem(40) rem(40) 0 0;
    ul{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      li{
        margin-bottom: rem(40);
        width: calc(100% / 5);
        img{
          width: rem(110);
          height: rem(110);
          border-radius: 50%;
          box-shadow: 0 1px 3px rgba(0,0,0,.3);
        }
      }
    }
  }
}
</style>
